<template>
    <div class="box">
        <button @click="ck2">上一页</button>
        <div v-for="(item,index) in as" :key="index" @click="ck3(item)"  :class="{'a':item==dqys}">{{ item }}</div>
        <button @click="ck1">下一页</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dqys: 1,
            ys:""
        }
    },
    watch: {
        dqys: {
            handler(a) {
                this.$emit("asd", a)
            }, immediate: true
        },
    },
    props: ["as"],
    methods:{
        ck1(){
            if(this.dqys<this.as){
                this.dqys++
            }
        },
        ck2(){
            if(this.dqys>1){
                this.dqys--
            }
        },
        ck3(s){
            this.dqys=s
        }
    }
}
</script>

<style scoped>
.box{
    width: 200px;
    display: flex;
    margin: 20px  auto;
    justify-content: space-around;
}
.a{
    color: red;
}
</style>